<template>
  <div class="time_main">
    <div class="time-list" :style="{ height: setHeight + 'px' }">
      <el-row :gutter="20">
        <el-col
          :xs="12"
          :sm="6"
          :md="6"
          :lg="4"
          :xl="4"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div class="time-box">
            <div class="num-show">
              <div class="num">
                {{ item.t1 }}
              </div>
              <div class="serial">{{ item.t2 }}</div>
            </div>
            <div class="time-show">
              <div class="show-run">
                <div class="time-text">
                  <i class="el-icon-watch" style="margin-right: 5px" />运行时间
                </div>
                <div class="time">{{ item.t3 }}</div>
              </div>
              <el-divider
                direction="vertical"
                class="time-divider"
              ></el-divider>
              <div class="show-remain">
                <div class="time-text">
                  <i
                    class="el-icon-alarm-clock"
                    style="margin-right: 5px"
                  />剩余时间
                </div>
                <div class="time">{{ item.t4 }}</div>
              </div>
            </div>
            <div class="time-progress">
              <el-progress
                :text-inside="true"
                :stroke-width="16"
                :percentage="item.percent"
                :status="formatProgress(item.percent)"
              ></el-progress>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="my_pag">
      <el-pagination
        background
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import { getClientHeight } from "@/utils/index";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage4: 4,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      dataList: [
        {
          t1: "1",
          t2: "202109001",
          t3: "4h30min",
          t4: "1h30min",
          percent: 30,
        },
        {
          t1: "2",
          t2: "202109002",
          t3: "4h30min",
          t4: "1h30min",
          percent: 50.56,
        },
        {
          t1: "3",
          t2: "202109003",
          t3: "4h30min",
          t4: "1h30min",
          percent: 92,
        },
        {
          t1: "4",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 29,
        },
        {
          t1: "5",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 50,
        },
        {
          t1: "6",
          t2: "202109004",
          t3: "4h30min",
          t4: "1h30min",
          percent: 98,
        },
        {
          t1: "7",
          t2: "202109007",
          t3: "4h30min",
          t4: "1h30min",
          percent: 77.77,
        },
        {
          t1: "8",
          t2: "202109008",
          t3: "4h30min",
          t4: "1h30min",
          percent: 95.66,
        },
        {
          t1: "9",
          t2: "202109009",
          t3: "4h30min",
          t4: "1h30min",
          percent: 66.66,
        },
        {
          t1: "10",
          t2: "2021090010",
          t3: "4h30min",
          t4: "1h30min",
          percent: 44,
        },
        {
          t1: "11",
          t2: "2021090011",
          t3: "4h30min",
          t4: "1h30min",
          percent: 80.99,
        },
        {
          t1: "12",
          t2: "2021090012",
          t3: "4h30min",
          t4: "1h30min",
          percent: 65.55,
        },
      ],
      setHeight: 300,
    };
  },
  mounted() {
    this.total = this.dataList.length;
    for (let i = 0; i < 30; i++) {
      this.dataList.push(this.dataList[0]);
    }
    this.$nextTick(() => {
      this.setHeight = getClientHeight(220);
      console.log(this.setHeight, "dataList");
    });
  },
  methods: {
    formatStatus(data) {
      if (data == "1") {
        return "待执行";
      } else if (data == "2") {
        return "过程中";
      } else if (data == "3") {
        return "完成";
      }
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
    },
    formatProgress(data) {
      if (data > 90) {
        return "exception";
      } else {
        return "success";
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.time_main {
  .my_pag {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    /deep/ .el-pagination button {
      background-color: inherit;
      .el-icon {
        color: #fff;
      }
    }
    /deep/ .el-pager {
      background-color: inherit;
      li {
        background-color: inherit;
        color: #fff;
      }
    }
    /deep/ .el-pagination__jump {
      color: #fff;
    }
    /deep/ .el-input__inner {
      background-color: #010b47;
      color: #fff;
      border: 1px solid #0da9f2;
    }
    /deep/ .el-pagination__total {
      color: #fff;
    }
  }
  /deep/ .time-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .time-list::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/ .time-list::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .time-list::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .time-list {
    width: 100%;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
  }
  .time-progress {
    padding: 0 10px;
    padding-bottom: 8px;
  }
  .time-box {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(38, 128, 210, 0.74);
    border: 1px solid #0da9f2;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    .num-show {
      display: flex;
      height: 32px;

      .num {
        font-size: 16px;
        display: flex;
        background: #1890ff;
        font-family: Microsoft YaHei;
        line-height: 32px;
        color: #fff;
        width: 48px;
        justify-content: center;
      }
      .serial {
        font-size: 16px;
        display: flex;
        background-color: #010b47;
        color: #fff;
        width: 100%;
        line-height: 32px;
        justify-content: center;
      }
    }
  }

  .time-show {
    font-weight: 400;
    line-height: 22px;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    display: flex;
    position: relative;
    .time-divider {
      height: 16px;
      width: 1px;
      background-color: #999999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
    }
  }
  .time-text {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
  }
  .show-run {
    text-align: center;
  }
  .time-show .time {
    font-size: 14px;
    color: #fff;
    /* margin-left: 12px; */
  }
}
</style>